<template>
	<view class="homePage ">
		<view class="weui-page__back">
			<image src="https://img.2024csnl.com/static/2.x/a31.png" mode="widthFix"></image>
		</view>
		<view class="mine">
			<view class="user-2x">
				<view class="btns">
					<view class="btn" @click="onSkip(`/pages/qiandao/index`)">
						<image src="https://img.2024csnl.com/static/2.x/a32.png" mode=""></image>
						<text>签到</text>
					</view>
					<view
						v-if="centerMsg.business && centerMsg.business.id"
						class="btn"
						@click="onSkip('/package/mine/businessCenter')">
						<image src="https://img.2024csnl.com/static/2.x/a33.png" mode=""></image>
						<text>商家端</text>
					</view>
				</view>
				<view class="user" @click.stop="linkTo('setUp')">
					<view class="avatar">
						<image :src="centerMsg.headimg" mode=""></image>
					</view>
					<view class="exp">
						<view class="" style="display: flex; align-items: center;">
							<view class="name">
								<text>{{centerMsg.nickname}}</text>
							</view>
							<view class="tag2">
								<image v-if="centerMsg.icon && centerMsg.icon[0]" :src="centerMsg.icon[0]" mode="heightFix"></image>
								<!-- <image v-if="centerMsg.levelid == 4" src="https://img.2024csnl.com/static/2.x/a110.png" mode="heightFix"></image>
								<image v-if="centerMsg.levelid == 3" src="https://img.2024csnl.com/static/2.x/a111.png" mode="heightFix"></image>
								<image v-if="centerMsg.levelid == 2" src="https://img.2024csnl.com/static/2.x/a112.png" mode="heightFix"></image>
								<image v-if="centerMsg.levelid == 1" src="https://img.2024csnl.com/static/2.x/a113.png" mode="heightFix"></image> -->
								<!-- <template v-if="isShowUserLevel">
									<text v-for="item in centerMsg.leveltext" :key="item">
										{{item}}会员
									</text>
								</template> -->
							</view>
						</view>
						<view class="uid">
							<text>ID: {{ centerMsg.id ? centerMsg.id : '暂无' }}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="account-2x">
				<view class="thead">
					<view class="title">
						<text>我的账户</text>
					</view>
					<view class="icon" @tap="changeAccount()">
						<template v-if="accountShow">
							<image src="https://img.2024csnl.com/static/2.x/a36.png" mode=""></image>
							<text>隐藏</text>
						</template>
						<template v-else>
							<image src="https://img.2024csnl.com/static/2.x/a37.png" mode=""></image>
							<text>显示</text>
						</template>
					</view>
				</view>
				<view class="tbody">
					<view class="item">
						<view class="cell" @click="onSkip(`/package/mine/myBalance?type=${centerMsg.givemoney}`)">
							<view class="number" v-if="accountShow">
								<text class="pre">￥</text>
								<text>{{ centerMsg.money ? centerMsg.money : 0 }}</text>
							</view>
							<view class="number" v-else>
								<text>{{ '******' }}</text>
							</view>
							<view class="label">
								<text>我的余额</text>
								<image src="https://img.2024csnl.com/static/2.x/a35.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="cell" @click="onSkip(`/package/mine/myPoints/myPoints?type=${centerMsg.givescore}`)">
							<view class="number" v-if="accountShow">
								<text>{{ Number(centerMsg.score) }}</text>
							</view>
							<view class="number" v-else>
								<text>{{ '******' }}</text>
							</view>
							<view class="label">
								<text>我的泌豆</text>
								<image src="https://img.2024csnl.com/static/2.x/a35.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- <view class="user">
				<view class="user_info" @click.stop="linkTo('setUp')">
					<image :src="centerMsg.headimg" mode=""></image>
					<view class="">
						<view class="user_name lv">
							<view class="nickName">
								{{centerMsg.nickname}}
							</view>
						</view>
						<view class="flex" style="align-items: start;">
							<view v-if="!isAudit && false" class="other_info">
								<view @click.stop="onCopy(centerMsg.yqcode,'邀请码')" v-if="centerMsg.yqcode">
									邀请码: {{centerMsg.yqcode}}</view>
							</view>
							<view style="font-size: 26rpx;" @click.stop="onCopy(centerMsg.id,'ID')">ID: {{centerMsg.id?centerMsg.id:'暂无'}}
							</view>
						</view>
						<view v-if="isShowUserLevel" class="flex" style="margin-top: 20rpx;font-size: 22rpx;">
							<view style="margin-right: 15rpx;" v-for="item in centerMsg.leveltext" :key="item">
								{{item}}
							</view>
						</view>
					</view>
				</view>
				<view class="btn">
					<view v-if="centerMsg.business!=null" @click="onSkip(`/package/mine/businessCenter`)">
						<image src="https://wx.2024csnl.com/static/mine/whiteChange1.png" mode="heightFix"></image>
					</view>

					<view v-if="false" class="" @click="onSkip('/package/mine/paymentCode')">
						<image src="https://wx.2024csnl.com/static/mine/shoukuanm2.png" mode=""></image>
						<text>付款码</text>
					</view>
				</view>
			</view> -->
			
			<!-- 资产 -->
			<!-- <view v-if="isShowMyProperty && !isAudit" class="mine_box mine_box_property">
				<view class="mine_box_t">
					<view class="title" style="height: 60rpx; line-height: 60rpx; display: flex; align-items: center; justify-content: center;">
						<image style="width: 48rpx;" mode="widthFix" src="https://wx.2024csnl.com/static/mine/money_logo.png"></image> 我的资产
					</view>
				</view>
				<view style="height: 1px; background-color: #c3d7d6; margin-top: 20rpx; margin-left: 64rpx; margin-right: 60rpx;"></view>
				<view class="my_assets">
					<view class="asset_item" @click="onSkip(`/package/mine/myBalance?type=${centerMsg.givemoney}`)">
						<view class="asset_val">
							<text>￥{{centerMsg.money?centerMsg.money:0}}</text>
						</view>
						<view class="asset_name" v-if="false">总额</view>
					</view>
					<view class="asset_item" v-if="false" @click="onSkip(`/package/mine/myQuanzheng/myQuanzheng?type=${centerMsg.givescore}`)">
						<view class="asset_val">
							<text>{{centerMsg.quanzheng?centerMsg.quanzheng:0}}</text>
						</view>
						<view class="asset_name">我的权证</view>
					</view>
					<view class="asset_item" v-if="false">
						<view class="asset_val">
							<text>{{centerMsg.qz_fy_amount?centerMsg.qz_fy_amount:0}}</text>
						</view>
						<view class="asset_name">今日分红权证值</view>
					</view>
				</view>
				<view class="my_assets" v-if="false">
					<view class="asset_item" @click="onSkip(`/package/mine/myProductzhi/myProductzhi`)">
						<view class="asset_val">
							<text>{{centerMsg.product_zhi?centerMsg.product_zhi:0}}</text>
						</view>
						<view class="asset_name">产品值</view>
					</view>
					<view class="asset_item" @click="onSkip(`/package/mine/myChouJiangMa/myChouJiangMa`)">
						<view class="asset_val">
							<text>{{centerMsg.choujiangma_zhi?centerMsg.choujiangma_zhi:0}}</text>
						</view>
						<view class="asset_name">抽奖码值</view>
					</view>
					<view class="asset_item" @click="onSkip('/package/mine/invitation')">
						<view class="asset_val">
							<image src="https://wx.2024csnl.com/static/mine/fxm.png" mode=""></image>
						</view>
						<view class="asset_name">分享码</view>
					</view>
				</view>
			</view> -->

			<view class="mine_content">
				<!-- <view style="background-color: #fff; border-radius: 20rpx; margin-bottom: 20rpx; display: flex; align-items: center; justify-content: center;padding: 60rpx 0;">
					<view style="display: flex; flex-direction: column; width: 40%; align-items: center;justify-content: center;" @click="onSkip(`/package/mine/myPoints/myPoints?type=${centerMsg.givescore}`)">
						<image style="width: 80rpx;" mode="widthFix" src="https://wx.2024csnl.com/static/mine/mine_center_1.png"></image>
						<view class="asset_name">我的泌豆</view>
					</view>
					<view style="width: 1px; height: 80rpx; background-color: #d5d5d5;"></view>
					<view style="display: flex; flex-direction: column; width: 40%; align-items: center;justify-content: center;" @click="onSkip(`/pages/qiandao/index`)">
						<image style="width: 80rpx;" mode="widthFix" src="https://wx.2024csnl.com/static/mine/mine_center_2.png"></image>
						<view class="asset_name">每日一签</view>
					</view>
				</view> -->
				<view class="banner">
					<view class="banner_t" @click="onGoMyOrder('all')">
						<view class="title">我的订单</view>
						<!-- <view class="more" >
							<text>查看全部</text>
							<uni-icons type="forward" size="12" color="#999999"></uni-icons>
						</view> -->
					</view>
					<view class="order_type">
						<view class="type_item" v-for="item in orderTypeList" :key="item.val" @click="onGoMyOrder(item.val)">
							<view class="" style="position: relative;">
								<view class="badgeBox">
									<uni-badge :text="item.text" type="error" absolute="rightTop"></uni-badge>
								</view>
								<image
									style="z-index: 0;"
									:src="`https://img.2024csnl.com/static/2.x/icon-${item.img}.png`"
									mode="heightFix">
								</image>
							</view>
							<view class="type_name">{{item.title}}</view>
						</view>
					</view>
				</view>

				<!----------------- 我的服务------------------ -->
				<view class="mine_box">
					<view class="mine_box_t">
						<view class="title">我的服务</view>
					</view>
					<view class="my_service">
						<template v-for="(item, index) in customClassifyList">
							<view
								v-if="(userStatus === 2 && item.isActive) || !item.isActive"
								class="">
								<view
									
									class="oneLine flex-center"
									@click="linkToPage(item.url, item.type)">
									<image
										class="service_img"
										:src="item.img"
										mode="">
									</image>
									<view class="service_name">{{ item.name }}</view>
								</view>
							</view>
						</template>
					</view>
				</view>
				<!----------------- 其他订单------------------ -->
				<view v-if="false" class="mine_box" @click="showToast('淘客授权中')">
					<view class="mine_box_t">
						<view class="title">其他订单</view>
						<view class="more">
							<text>查看全部</text>
							<uni-icons type="forward" size="12" color="#999999"></uni-icons>
						</view>
					</view>

					<m-tab-list :otherOrderTypeList="otherOrderTypeList"></m-tab-list>
				</view>
				
				<!-- 客服popup -->
				<uni-popup ref="popup" type="bottom">
					<view class="popBox">
						<view class="phoneNum">134 6765 1319</view>
						<view style="color: #0084FF;" @click="callPhone('13467651319')">呼叫</view>
						<view class="cancel" @click="close('popup')">取消</view>
					</view>
				</uni-popup>
				
				<!-- 客服 popup2 -->
				<uni-popup ref="customer-service">
					<view class="service-popup">
						<view class="thead">
							<view class="title">
								<text>联系客服</text>
							</view>
						</view>
						<view class="tbody">
							<view class="qrcode">
								<image src="https://img.2024csnl.com/static/2.x/a105.png" mode=""></image>
							</view>
							<view class="label">
								<text>长按识别二维码联系客服小伶</text>
							</view>
							<view class="logo">
								<image src="https://img.2024csnl.com/static/2.x/a54.png" mode="heightFix"></image>
							</view>
						</view>
					</view>
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		$get,
		getPersonalCenter,
		getVersions,
		getAppConfigSync
		
	} from "../../api/index.js"
	export default {
		data() {
			return {
				isAudit: false,
				givemoney: null,
				givescore: null,
				isShowUserLevel: false,
				isShowMyProperty: false,
				versionNumber: getApp().globalData.versionNumber,
				centerMsg: {},
				systemBarHeight: getApp().globalData.systemBarHeight,
				orderTypeList: [{
					title: '待付款',
					img: 'dfk',
					val: 0,
					text: ''
				}, {
					title: '待发货',
					img: 'dfh',
					val: 1,
					text: ''
				}, {
					title: '待收货',
					img: 'dsh',
					val: 2,
					text: ''
				}, {
					title: '已完成',
					img: 'dpj',
					val: 3
				}],
				currentIndex: 0,
				serviceTypeList: [],
				asyncHomeCheckLogin: false,
				intervalTimer: 0,
				accountShow: true,
				customClassifyList: [
					{
						url: '/package/mine/mycommunity/mycommunity',
						name: '我的社区',
						img: 'https://img.2024csnl.com/static/2.x/a43.png',
						type: '',
						isActive: true
					},
					{
						url: '/package/we/pages/data-center/index',
						name: '数据中心',
						img: 'https://img.2024csnl.com/static/2.x/a46.png',
						type: '',
						isActive: true
					},
					{
						url: '/package/mine/hexiaoList',
						name: '核销码',
						img: 'https://img.2024csnl.com/static/2.x/a55.png',
						type: '',
						isActive: false
					},
					{
						url: '/package/we/pages/business-school/index',
						name: '商学院',
						img: 'https://img.2024csnl.com/static/2.x/a58.png',
						type: '',
						isActive: true
					},
					{
						url: '/package/we/pages/material-center/index',
						name: '素材中心',
						img: 'https://img.2024csnl.com/static/2.x/a57.png',
						type: '',
						isActive: true
					},
					{
						url: '/pages/tab/invitation',
						name: '分享码',
						img: 'https://img.2024csnl.com/static/2.x/a44.png',
						type: '',
						isActive: true
					},
					{
						url: '/package/mine/joinService?pageType=2',
						name: '商家入驻',
						img: 'https://img.2024csnl.com/static/2.x/a56.png',
						type: '',
						isActive: true
					},
					{
						url: '',
						name: '联系客服',
						img: 'https://img.2024csnl.com/static/2.x/a53.png',
						type: 'kefu',
						isActive: false
					},
					{
						url: '/package/mine/setUp/setUp',
						name: '设置',
						img: 'https://img.2024csnl.com/static/2.x/a45.png',
						type: '',
						isActive: false
					}
				],
				userStatus: 0
			}
		},
		onLoad() {
			const appConfig = getAppConfigSync()
			this.isShowUserLevel = appConfig.isShowUserLevel
			this.isShowMyProperty = appConfig.isShowMyProperty
			this.serviceTypeList = appConfig.serviceTypeList
			if (uni.getSystemInfoSync().platform !== 'ios') {
				this.onGetUpdate()
			}
		},
		async onShow() {
			await this.checkUserStatus();
			await this.onGetPersonalCenter();
			await this.onGetHomeCheckLogin();
		},
		onHide() {
			if (this.intervalTimer > 0) {
				clearInterval(this.intervalTimer);
			}
		},
		methods: {
			// 检查菜单
			async checkUserStatus () {
				const res = await $get('s=/ApiIndex/homecheckpid')
				const { status, data, msg } = res.data
				this.userStatus = status
			},
			// 是否整包更新
			async onGetUpdate() {
				const res = await getVersions('s=/ApiZwyRequest/versionup&aid=1')
				const {
					status,
					data,
					msg
				} = res.data
				if (status == 1) {
					var thisVersion = this.versionNumber.replace("V", "").split(".");
					var dataVersion = data.version.replace("V", "").split(".");
					var isLow = false;
					if (parseInt(thisVersion[0]) < parseInt(dataVersion[0])) {
						isLow = true;
					} else if (parseInt(thisVersion[1]) < parseInt(dataVersion[1])) {
						isLow = true;
					} else if (parseInt(thisVersion[2]) < parseInt(dataVersion[2])) {
						isLow = true;
					}

					if (isLow) {
						this.showVerSin(data.url)
					}
				} else {
					this.showToast(msg)
				}
			},
			showVerSin(url) {
				uni.showModal({
					title: '提示',
					content: '有新版本更新,快去下载吧!',
					confirmText: '更新',
					confirmColor: '#41644A',
					success: (res) => {
						if (res.confirm) {
							this.downLoad(url)
						} else if (res.cancel) {}
					}
				});
			},
			// 会跨域 奇怪
			downLoad(url) {
				const downLoadTask = uni.downloadFile({
					url: url,
					success: (res) => {
						if (res.statusCode == 200) {
							uni.showToast({
								title: '安装包下载成功,即将安装',
								icon: "success"
							})
							plus.runtime.install(res.tempFilePath)
						} else {
							this.showToast('安装失败,请稍后重试')
						}
					}
				})
				this.showToast('后台下载中...')

			},
			onGoMyOrder(val) {
				this.onSkip(`/package/mine/myOrderList/myOrderList?type=${val}`)
			},
			async onGetHomeCheckLogin() {
				let that = this;
				const res = await getPersonalCenter(`s=/ApiIndex/homechecklogin`)
				const {
					status,
					msg
				} = res.data

				if (status == 1) {
					this.isAudit = false;
					this.asyncHomeCheckLogin = true;
					this.intervalTimer = setInterval(async () => {
						await this.onGetBobao();
					}, 10000);
				} else if (status == 3) {
					this.isAudit = false;
				}
			},
			async onGetBobao() {

				const res = await getPersonalCenter(`s=/ApiBusiness/orderbobao`)
				const {
					yuying,
					status,
					msg
				} = res.data

				if (status == 1) {
					var plugin = requirePlugin("WechatSI");
					plugin.textToSpeech({
						lang: 'zh_CN',
						content: yuying,
						success: function(res) {
							if (res.retcode == 0) {
								let innerAudioContext = uni.createInnerAudioContext();
								innerAudioContext.autoplay = true; //自动播放
								innerAudioContext.loop = false; //循环播放
								innerAudioContext.src = `${res.filename}`;
								innerAudioContext.onPlay(() => { //可以播放事件
								});
								innerAudioContext.onError((res) => {});
								innerAudioContext.onstatechange = function() {
									console.log(innerAudioContext.state);
								};
							}
						}
					})
				}
			},
			async onGetPersonalCenter() {
				const res = await getPersonalCenter('s=/ApiZwyRequest/userinfo')
				const {
					data,
					status,
					msg
				} = res.data
				if (status == 1) {
					this.centerMsg = data
					const {
						count0,
						count1,
						count2
					} = data.orderinfo
					this.orderTypeList[0].text = count0
					this.orderTypeList[1].text = count1
					this.orderTypeList[2].text = count2
					let list = this.serviceTypeList
					if (this.centerMsg.plug > 0) {
						let list = []
						this.serviceTypeList.forEach((item, i) => {
							if (item.name != '推广员') {
								list.push({
									...item
								})
							}
						})
						list.unshift({
							name: '推广员',
							img: 'tuiguangyuan',
							url: 'extensionAgent'
						})
						const result = Array.from(new Set(list.map(item => JSON.stringify(item)))).map(item => JSON
							.parse(item));
						this.serviceTypeList = result
					}
					if (this.centerMsg.dlid > 0) {
						let list = []
						this.serviceTypeList.forEach((item, i) => {
							if (item.name != '代理入口') {
								list.push({
									...item
								})
							}
						})
						list.push({
							name: '代理入口',
							img: 'daili',
							url: 'agencyLogin'
						})
						const result = Array.from(new Set(list.map(item => JSON.stringify(item)))).map(item => JSON
							.parse(item));
						this.serviceTypeList = result
					}
					uni.setStorageSync('merchant', this.centerMsg.business)
					console.log('this.serviceTypeList ==> ', this.serviceTypeList)

				} else {
					this.showToast(msg)
				}
			},
			// 复制
			onCopy(value, name) {
				uni.setClipboardData({
					data: value.toString(),
					success: () => {
						console.log(value)
						this.showToast(`复制${name}成功~`)
					}
				});
			},
			// 扫码核销
			onChargeOff() {
				let that = this

				uni.scanCode({
					onlyFromCamera: true,
					autoZoom: false,
					success: (res) => {
						this.showToast(res.result)
					}
				});
			},
			swiperChange(e) {
				this.currentIndex = e.detail.current
			},
			linkTo(url, type) {
				if (url == 'server') {
					this.open('popup')
				} else if (url == 'scan') {
					var getParam = function(path, name) {
						var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
						if (reg.test(path))
							return unescape(RegExp.$2.replace(/\+/g, " "));
						return "";
					};

					uni.scanCode({
						onlyFromCamera: true,
						autoZoom: false,
						success: (res) => {
							setTimeout(() => {
								console.log(res);
								const bid = getParam(res.result, "bid");
								const bindbid = getParam(res.result, "bindbid");
								if (bid != '' || bindbid != '') {
									uni.navigateTo({
										url: `/business/pages/business_tab/qrCodePay?bid=${bid}&bindbid=${bindbid}`
									})
								} else {
									uni.showToast({
										title: '无效二维码'
									});
								}
							}, 800)
						}
					});
				} else {
					if (type == 'three') {
						uni.switchTab({
							url
						})
					} else {
						let router = ''

						if (type == 'one') {
							router = `/package/mine/${url}`
						} else if (type == 'two') {
							router = url
						} else {
							if (url.indexOf("community") == 0) {
								router = `/package/mine/mycommunity/mycommunity`
							} else {
								router = `/package/mine/${url}/${url}`
							}
						}
						uni.navigateTo({
							url: router
						})
					}

				}

			},
			linkToPage (url, type) {
				if (type === 'kefu') {
					this.open('customer-service')
				} else {
					uni.navigateTo({
						url
					});
				}
			},
			open(n) {
				this.$refs[n].open();
			},
			close(n) {
				this.$refs[n].close();
			},
			// 我的账户
			changeAccount () {
				this.accountShow = !this.accountShow;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.badgeBox {
		z-index: 99;
		position: absolute;
		top: -40rpx;
		right: 20rpx;
	}

	.homePage {
		.headerBox {
			background: #41644A;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			z-index: 999;
		}
	}

	.popBox {
		font-size: 30rpx;
		background: #fff;
		border-radius: 40rpx 40rpx 0px 0px;

		.phoneNum {
			color: #999999;
			font-size: 24rpx;
		}

		view {
			padding: 50rpx 0;
			text-align: center;
			border-bottom: 1px solid #F3F3F3;
		}

		.cancel {
			border-top: 12rpx solid #F3F3F3;
			color: #333333;
		}
	}

	.mine {
		position: relative;
		z-index: 1;
		min-height: 100vh;
		padding: 40rpx 22rpx 0 22rpx;		
		.user {
			display: flex;
			justify-content: space-between;
			margin-bottom: 34rpx;

			.user_info {
				display: flex;
				align-items: center;
				color: #000;

				>image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 18rpx;
				}

				>view {
					.user_name {
						font-size: 30rpx;
						line-height: 30rpx;
						font-weight: Medium;
						margin-bottom: 20rpx;

						image {
							width: 60rpx;
							border-radius: 10rpx;
							height: 60rpx;
						}
					}

					.lv {
						display: inline-flex;
						align-items: center;

						text {
							font-size: 26rpx;
							margin: 0 10rpx 0 30rpx;
						}

						.nickName {
							max-width: 200rpx;
							margin-right: 15rpx;
							line-height: 45rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap
						}
					}

					.other_info {
						display: flex;
						align-items: center;

						view {
							font-size: 22rpx;
							line-height: 22rpx;
						}


					}
				}
			}

			.btn {
				>view {
					font-size: 22rpx;
					color: #fff;
					font-weight: Medium;
					display: flex;
					align-items: center;

					image {
						height: 60rpx;
					}
				}
			}
		}

		.mine_box_property {
			background: linear-gradient(#bbf3f6, #fff);
			
			background-repeat: no-repeat;
			background-size: cover;
		}

		.mine_box {
			width: 100%;
			border-radius: 20rpx;
			padding: 40rpx 0;

			.mine_box_t {
				padding: 0 64rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.title {
					font-size: 32rpx;
				}

				.title1 {
					line-height: 80rpx;
					font-size: 32rpx;
				}

				.more {
					display: flex;
					align-items: center;

					text {
						font-size: 22rpx;
						color: #A9A9A9;
						margin-right: 8rpx;
					}
				}
			}

			.my_assets {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 52rpx;
				box-sizing: border-box;

				.asset_item {
					text-align: center;
					flex: 1;

					.asset_val {
						line-height: 36rpx;
						margin-bottom: 16rpx;

						text {
							font-size: 46rpx;
							font-weight: bold;
							color: #2ab5a4;
						}

						image {
							width: 38rpx;
							height: 36rpx;
						}
					}

					.asset_name {
						font-size: 34rpx;
						line-height: 34rpx;
					}
				}
			}

			.my_service {
				display: grid;
				grid-template-columns: repeat(3, 1fr) !important;
				padding: 20rpx 0 0;
				box-sizing: border-box;

				.oneLine {

					flex-direction: column;
					margin-bottom: 50rpx;
				}

				.service_img {
					width: 60rpx;
					height: 60rpx;
					line-height: 60rpx;

				}

				.service_name {
					font-size: 24rpx;
					margin-top: 20rpx;
				}
			}
		}

		.banner {
			width: 100%;
			height: 234rpx;
			background-color: #fff;
			border-radius: 14rpx;

			.banner_t {
				padding: 28rpx 22rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #F3F3F3;

				.title {
					font-size: 30rpx;
					color: #302D2D;
					font-weight: bold;
				}

				.more {
					display: flex;
					align-items: center;

					text {
						font-size: 22rpx;
						color: #A9A9A9;
						margin-right: 8rpx;
					}
				}
			}

			.order_type {
				display: flex;
				justify-content: space-between;
				padding: 32rpx 50rpx 0;

				.type_item {
					>view {
						display: flex;
						justify-content: center;

						image {
							width: 44rpx;
							height: 44rpx;
						}
					}

					.type_name {
						font-size: 24rpx;
						line-height: 24rpx;
						padding-top: 18rpx;
					}
				}
			}
		}

		.mine_content {
			padding: 10rpx 0;
			box-sizing: border-box;

			.banner {
				width: 100%;
				height: auto;
				background-color: #fff;
				border-radius: 20rpx;
				padding-bottom: 40rpx;
				margin-bottom: 20rpx;

				.banner_t {
					padding: 30rpx 40rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					border-bottom: 1rpx solid #ffffff;

					.title {
						font-size: 30rpx;
						color: #302D2D;
						font-weight: bold;
					}

					.more {
						display: flex;
						align-items: center;

						text {
							font-size: 22rpx;
							color: #A9A9A9;
							margin-right: 8rpx;
						}
					}
				}

				.order_type {
					display: flex;
					justify-content: space-between;
					padding: 32rpx 50rpx 0;

					.type_item {
						>view {
							display: flex;
							justify-content: center;

							image {
								width: 60rpx;
								height: 60rpx;
							}
						}

						.type_name {
							font-size: 28rpx;
							line-height: 24rpx;
							padding-top: 18rpx;
						}
					}
				}
			}

			.mine_box {
				width: 100%;
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.mine_box_t {
					padding: 0 40rpx 40rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #FBFBFB;

					.title {
						font-size: 30rpx;
						font-weight: bold;
					}

					.more {
						display: flex;
						align-items: center;

						text {
							font-size: 22rpx;
							color: #A9A9A9;
							margin-right: 8rpx;
						}
					}
				}

				.my_assets {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx 52rpx;
					box-sizing: border-box;

					.asset_item {
						text-align: center;
						flex: 1;

						.asset_val {
							line-height: 36rpx;
							margin-bottom: 16rpx;

							text {
								font-size: 26rpx;
								font-weight: bold;
								color: #41644A;
							}

							image {
								width: 38rpx;
								height: 36rpx;
							}
						}

						.asset_name {
							font-size: 24rpx;
							line-height: 24rpx;
						}
					}
				}

				.my_service {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					padding: 20rpx 0 0;
					box-sizing: border-box;

					.oneLine {

						flex-direction: column;
						margin-bottom: 50rpx;
					}

					.service_img {
						width: 60rpx;
						height: 60rpx;
						line-height: 60rpx;

					}

					.service_name {
						font-size: 28rpx;
						margin-top: 30rpx;
					}
				}
			}
		}
	}
	
	.user-2x {
		position: relative;
		overflow: hidden;
		margin: 0 -20rpx;
		padding: 0 20rpx;
		.btns {
			position: absolute;
			right: 0;
			top: 20rpx;
			z-index: 10;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-right: -10rpx;
			.btn {
				display: flex;
				align-items: center;
				padding: 10rpx 20rpx;
				background: #ffffff;
				margin: 6rpx;
				border-radius: 40rpx;
				&:last-child {
					border-radius: 40rpx 0 0 40rpx;
				}
				image {
					display: block;
					width: 40rpx;
					height: 40rpx;
				}
				text {
					font-size: 26rpx;
					margin-left: 10rpx;
				}
			}
		}
		.user {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			.avatar {
				margin-right: 20rpx;
				image {
					display: block;
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					border: 4px solid #ffffff;
					background: #eeeeee;
				}
			}
			.exp {
				flex: 1;
			}
			.name {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 40rpx;
				color: #ffffff;
				font-weight: bold;
				margin-right: 20rpx;
			}
			.tag2 {
				image {
					height: 40rpx;
				}
			}
			.tag {
				display: flex;
				align-items: center;
				padding: 10rpx;
				border-radius: 10rpx;
				background: -webkit-linear-gradient(left, rgba(253, 214, 159, 1), rgba(253, 214, 159, .5));
				image {
					display: block;
					width: 30rpx;
					height: 30rpx;
				}
			}
			.uid {
				margin: 20rpx 0 0 0;
				text {
					display: inline-flex;
					line-height: 30rpx;
					padding: 10rpx 20rpx;
					border: 1px solid #ffffff;
					border-radius: 10rpx;
					color: #ffffff;
				}
			}
		}
	}
	
	.account-2x {
		background: #ffffff;
		border-radius: 20rpx;
		margin-top: 80rpx;
		margin-bottom: 10rpx;
		.thead {
			padding: 40rpx 40rpx 20rpx;
			display: flex;
			.title {
				flex: 1;
				line-height: 40rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #000;
			}
			.icon {
				display: flex;
				align-items: center;
				image {
					display: block;
					width: 44rpx;
					height: 44rpx;
					margin-right: 10rpx;
				}
				text {
					font-size: 26rpx;
					color: #999;
				}
			}
		}
		.tbody {
			display: flex;
			align-items: center;
			padding: 0rpx 0 40rpx;
			text-align: center;
			.item {
				flex: 1;
			}
			.cell {
				position: relative;
				border-left: 1px solid #eee;
			}
			.number {
				line-height: 80rpx;
				font-size: 44rpx;
				font-weight: bold;
				.pre {
					font-size: 28rpx;
				}
			}
			.label {
				display: flex;
				align-items: center;
				justify-content: center;
				image {
					display: block;
					width: 30rpx;
					height: 30rpx;
				}
				text {
					font-size: 28rpx;
					color: #999999;
				}
			}
		}
	}
	
	.service-popup {
		background: #ffffff;
		border-radius: 20rpx;
		width: 75vw;
		padding: 40rpx 0 60rpx;
		.thead {
			position: relative;
			text-align: center;
			.title {
				line-height: 80rpx;
				font-size: 34rpx;
				font-weight: bold;
			}
		}
		.tbody {
			position: relative;
			text-align: center;
			margin-top: 20rpx;
			.qrcode {
				image {
					width: 50vw;
					height: 50vw;
					border-radius: 10rpx;
					background: #eeeeee;
				}
			}
			.label {
				margin-top: 10rpx;
				line-height: 80rpx;
				font-size: 34rpx;
				font-weight: bold;
			}
			.logo {
				margin-top: 10rpx;
				image {
					height: 60rpx;
				}
			}
		}
	}
</style>